import React, { useState } from 'react';
import Crumbs from '../../components/crumbs/index';
import { Table, Button, Radio } from 'antd';
import { ItemChange } from '../../util/util';
import './scss/stateAdmin.scss';

const StateAdmin = () => {
  const [CrumbsList] = useState([{ name: '积分商城' }, { name: '状态管理', url: '/stateAdmin' }]);
  const [Index, setIndex] = useState(0);
  const [StateList] = useState(['全部状态', '已发货', '已付款', '已收货', '已关闭']);
  const [Mt] = useState(40);
  const [dataSource] = useState([
    {
      id: '001',
      index: 0,
      name: '百乐眠胶囊',
      image:
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1848029953,2858927272&fm=224&gp=0.jpg',
      seller: '小兰',
      pay: '积分支付',
      price: '30积分',
      state: '1',
      time: 1623748232577,
      number: 'sx45017854695823652365',
    },
    {
      id: '002',
      index: 1,
      name: '百乐眠胶囊',
      image:
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1848029953,2858927272&fm=224&gp=0.jpg',
      seller: '小兰',
      pay: '积分支付',
      price: '30积分',
      state: '1',
      time: 1623748232577,
      number: 'sx4525898955555222365',
    },
  ]);
  const [columns] = useState([
    {
      title: '商品',
      dataIndex: 'index',
      render: (index) => (
        <div style={{ marginTop: Mt + 'px' }}>
          <img src={dataSource[index].image} alt={dataSource[index].name} className="imageBox" />
          <span>{dataSource[index].name}</span>
        </div>
      ),
    },
    {
      title: '卖家',
      dataIndex: 'seller',
      render: (text) => <div style={{ marginTop: Mt + 'px' }}>{text}</div>,
    },
    {
      title: '支付/配送',
      dataIndex: 'pay',
      render: (text) => <div style={{ marginTop: Mt + 'px' }}>{text}</div>,
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: (text) => <div style={{ marginTop: Mt + 'px' }}>{text}</div>,
    },
    {
      title: '操作',
      dataIndex: 'index',
      render: () => (
        <div style={{ marginTop: Mt + 'px' }}>
          <Button type="link">查看详情</Button>
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'state',
      render: (text) => <div style={{ marginTop: Mt + 'px' }}>{text}</div>,
    },
  ]);
  return (
    <div className="stateAdmin">
      <Crumbs CrumbsList={CrumbsList} />
      <ul className="stateBox flex">
        {StateList.map((item, index) => {
          return (
            <li
              key={index}
              className={Index === index ? 'active' : ''}
              onClick={() => setIndex(index)}>
              {item}
            </li>
          );
        })}
      </ul>
      <div className="stateTable">
        <div className="stateTableBox">
          {dataSource.map((item, index) => {
            return (
              <div className="stateTableBoxLi" key={index}>
                <Radio.Group>
                  <Radio.Button>商城</Radio.Button>
                </Radio.Group>
                <span style={{ marginLeft: '50px' }}>{ItemChange(item.time)}</span>
                <span style={{ marginLeft: '50px', color: '#616161' }}>
                  订单编号： {item.number}
                </span>
              </div>
            );
          })}
        </div>
        <Table dataSource={dataSource} columns={columns} pagination={false} rowKey="index" />
      </div>
    </div>
  );
};

export default StateAdmin;
